import React, {useRef} from "react";
import {createStyles} from "antd-style";
import {Button} from "antd";
import BackgroundImage from "@/components/public/BackgroundImage.tsx";
import IntroPageBgSelector from "@/components/page/IntroPage/IntroPageBgSelector.tsx";

const useStyle = createStyles(({css, token}) => {
    const container = css`
        height: 100vh;
        display: grid;
        place-content: center;
    `
    const control = css`
        display: flex;
        flex-direction: column;
        background-color: rgba(33, 35, 45, 0.29);
        backdrop-filter: blur(5px);
        padding: 40px;
        border-radius: 20px;

        .title {
            font-size: 40px;
            margin: 30px;
            text-align: center;
        }

        .content {
            display: flex;
            flex-direction: column;
            place-content: center;
            padding: 0 50px;
            gap: 10px;
            button {
                box-shadow: none;
            }
        } 
    `

    return {
        container,
        control,
    }
})

const Index: React.FC = () => {
    const {styles} = useStyle();
    const container = useRef<HTMLDivElement>();

    const jumpToPhoto = () => {
        location.href = "#photo"
    }

    const jumpToPhoto2 = () => {
        location.href = "#photo2"
    }

    const jumpToPhoto3 = () => {
        location.href = "#photo3"
    }

    const jumpToVideo = () => {
        location.href = "#video"
    }

    const jumpToMd = () => {
        location.href = "#md"
    }

    // 切换菜单的隐藏与显示
    const switchMenu = () => {
        const display = container.current.style.display;
        if (display == 'none') {
            container.current.style.display = null
        } else {
            container.current.style.display = 'none'
        }
    }

    return (
        <>
            <div className={styles.container} onClick={switchMenu}>
                <div ref={container} className={styles.control}>
                    <h1 className="title">
                        hello
                    </h1>
                    <div className="content">
                        <Button type="primary" onClick={jumpToVideo}>视频</Button>
                        <Button type="primary" onClick={jumpToPhoto}>图片</Button>
                        <Button type="primary" onClick={jumpToPhoto2}>图片2</Button>
                        <Button type="primary" onClick={jumpToPhoto3}>图片3</Button>
                        <Button type="primary" onClick={jumpToMd}>文档</Button>
                        <IntroPageBgSelector content={'切换背景'}/>
                    </div>
                </div>
            </div>
            <BackgroundImage/>
        </>
    )
}

export default Index
